<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新东方顶部导航</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			c{
				position: relative;
			}
			.c1 img{
				width: 1300px;
				height: 40px;
			}
			#id1{
				position: relative;
				top: -40px;
				left: 10px;
			}
			#id2{
				position: relative;
				background: red;
				top: -90px;
				left: 880px;
			}
			.c .c2  ul{
				margin-left: 200px;
				position:relative;
				top: -65px;
			}
			.c .c2 ul li{
				list-style: none;
				display: inline-block;
				margin-left: 20px;
				color: grey;
				
			}
			.c .c2 ul span{
				color: grey;
				margin-left: 20px;
			}
			.c .c3{
				border: 1px solid gray;
				width: 200px;
				height: 250px;
				line-height: 35px;
				position: absolute;
				left: 600px;
				top: 35px;
				background: white;
			}
			.c .c3 ul li{
				color: grey;
				list-style: none;
				padding-left: 10px;
				padding-right: 10px;
				
			}
			.c .c3 ul #hr1,.c .c3 ul #hr2{
				padding-left: 10px;
				padding-right: 10px;
			}
		</style>
	</head>
	<body>
		<div class="c">
			<div class="c1"><img src="img/top_bg.gif"/></div>
			<div class="c2">
				<img src="img/logo.gif" id="id1"/>
				<ul>
					<li>购物车</li>
					<span>|</span>
					<li>优惠券</li>
					<span>|</span>
					<li>快速注卡</li>
					<span>|</span>
					<li>各地购课</li>
					<span>|</span>
					<li>手机报</li>
					<span>|</span>
					<li>网站导航</li>
				</ul>
				<img src="img/open_icon.gif"  id="id2"/>
			</div>
			<div class="c3">
				<ul>
					<li>托福 雅思 考研 职称英语 初中 日语</li>
					<div id="hr1">
						<hr />
					</div>
					<li>网络课堂 资讯中心 知识堂 大师讲坛 学习论坛 学词 考研搜校</li>
					<div id="hr2">
						<hr />
					</div>
					<li>M-Zone 手机报 时时英语</li>
			</div>
		</div>
	</body>
</html>
